<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../inf/font_n5t1ksdn35/iconfont.css">
    <link rel="stylesheet" href="../css/Shopping.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/botton.css">
    <link rel="stylesheet" href="../css/pagination.css">
    <link rel="stylesheet" href="../css/show.css">
</head>

<body>
    <div class="leadh">

    </div>

    <div class="leads">

    </div>

    <div class="box"></div>

    <div class="msg-box">
        <div class="msg">
            <div class="loupe">
                <div class="shoutime">

                </div>
                <div class="switch">
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="msgData">

            </div>
        </div>
    </div>


    <div class="goodsMsg-box">
        <div class="goodsMsg">
            <div class="option">
                <ul>
                    <li>商品展示</li>
                    <li>商品参数</li>
                    <li>搭配灵感</li>
                    <li>服务说明</li>
                </ul>
            </div>
            <img src="../img/showone.jpg" alt="" class="showone">
            <div class="showt">
                <img src="../img/showtow.jpg" alt="">
                <div class="move">
                    <p>小黑瓷 X 曜如真我</p>
                    <p>神秘曜黑融合高贵银，本真色彩</p>
                    <p>至简表盘，流露真我永曜魅力</p>
                </div>
            </div>
            <div class="showthree">
                <img src="../img/showthree.jpg" alt="">
                <div class="move">
                    <p>匠心工艺</p>
                    <p>标志性LOGO刻印，匠心独运</p>
                    <p>细节处展现轻奢质感</p>
                </div>
            </div>
            <div class="showf">
                <img src="../img/showf.jpg" alt="">
                <div class="move">
                    <p>蝴蝶双扣</p>
                    <p>按钮式蝴蝶双扣，对称平衡之美</p>
                    <p>自然弧度贴合手腕</p>
                </div>
            </div>


        </div>
    </div>

    <div class="leadf">

    </div>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/api.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/jquery.pagination.js"></script>
<script src="../js/hearder.js"></script>
<script>
    $(".leadh").load("../html/hearder.html")
    $(".leadf").load("../html/footer.html")
    $(".leads").load("../html/Shopping.html")
    var search = location.search;
    var gid;
    if (search) {
        gid = search.split("=")[1]
        // console.log(arr);
        searchGoodsById({ gid }).then(result => {
            var { status, data: { id, goodsId, goodsName, goodsPrice, smallPicList, bigPicList } } = result;
            if (status) {
                var leftHtml = `
                <div class="box2">
                        <img src="${bigPicList[0]}" alt="" class="fixed">
                        <div class="move"></div>
                    </div>
                    <div class="prve"><a href=""><span class="iconfont icon-right_arrow"></span></a></span></div>

                    <div class="next"><a href=""><span class="iconfont icon-left"></span></a></div>
                    <div class="pos">
                        <div><img src="${bigPicList[0]}" alt="" class="showmove"></div>
                    </div>
            `
                $(".shoutime").html(leftHtml);

                var swtch = ""
                bigPicList.slice(0, 5).forEach((item, index) => {
                    swtch += `
                    <li class="${index == 0 ? 'active' : ''}"><a href="javascript:" class="swicha"><img src="${smallPicList[index]}" bigImg="${item}" alt=""></a></li>
                    `
                })
                $(".switch ul").html(swtch);

                var rightHTML = ` <p class="now">全选上市</p>
                <p class="box1"><span class="goodsName">${goodsName}</span><span class="price">￥ ${goodsPrice}</span></p>
                <p class="line"></p>
                <p class="cs"> <span class="colour">颜色 ：</span> <span class="size">尺码 ：</span></p>
                <p class="choice"> <a href=""><span></span></a> <a href=""><span>32</span></a>
                    <a href="javascript:">
                        <span>尺寸指南</span>
                    </a>
                </p>
                <p class="card"> <a href="">+ 定制贺卡</a></p>
                <p class="purchase"><a href="javascript:">立即购买</a></p>
                <div class="note">
                    <p><span></span><span>顺丰包邮</span></p>
                    <p><span></span><span>免息分期</span></p>
                    <p><span></span><span>正品保障</span></p>
                </div>`
                $(".msgData").html(rightHTML);


            }
        })

    } else {
        location.href = "../html/dd.html"
    }

    $(document).on("click", ".switch ul li a", function () {

        $(this).parent().addClass("active").siblings().removeClass("active");
        var url = $(this).find("img").attr("bigImg")
        $(".fixed,.showmove").attr("src", url)
        // console.log(url);
    })
    $(document).on("click", ".purchase", function () {
        var buyNum = 1
        // console.log(1);
        var phone = getCookie("phone")
        if (phone) {
            addToShoppingCar({ phone, gid, buyNum }).then(reselut => {
                var { status, detail } = reselut;
                if (status) {
                    if (confirm("是否立即支付")) {
                        total = 0
                        searchShoppingCarByUser({ phone }).then(reslut => {
                            console.log(phone);
                            var { status, data } = reslut
                            if (status) {
                                var html = ""
                                $(".showgoods ul").html(html)
                                data.forEach(({ id, gid, buyNum, goodsName, goodsPrice, bigPicList }) => {
                                    html += `
                <li class="data-id" data-id=${id}>
                    <div class="goodsMsg">
                        <div class="left"><img src="${bigPicList[0]}" alt=""></div>
                        <div class="content">
                            <p><a href="">${goodsName}</a></p>
                            <p><span class="number1">${buyNum}</span><span>x ￥</span> <span class="price">${goodsPrice}</span></p>
                            <p><span></span><span>40MM</span></p>
                        </div>
                        <div class="right">
                            <span class="iconfont icon-lajitong"></span>
                            <span class="iconfont icon-jian"></span>
                            <input type="text" name="" id="" class="number" value="${buyNum}" readonly=“readonly”>
                            <span class="iconfont icon-jia"></span>
                        </div>

                    </div>

                </li>
                `
                                    total += buyNum * goodsPrice;
                                })
                                console.log(total);
                                $(".showgoods ul").html(html);
                                $(".total").text(total.toFixed(2))
                            }
                        })
                        refresh()
                        $(".shadow").css({ display: "block" })
                        this.top = document.documentElement.scrollTop;
                        document.body.style.position = 'fixed';
                        document.body.style.height = '100vh';
                        document.body.style.overflow = 'hidden';
                        document.body.style.top = -+this.top + 'px';
                    }
                } else {
                    alert(gid);
                }
            })
        } else {
            alert("即将弹跳到登录页面")
            location.href = "../html/sign.html?returnUrl=" + encodeURIComponent(location.href);
        }
    })

    var flag = false
    $(document).on("mouseenter", ".box2", function () {
        flag = true
        $(".pos").css({ display: "block" })
        $(".move").css({ display: "block" })
        $(".box2").mousemove(function (e) {
            console.log($(".move").width() / 2);
            if (flag) {
                var x = e.pageX - $(".box2").offset().left - $(".move").width() / 2;
                var y = e.pageY - $(".box2").offset().top - $(".move").height() / 2;
                if (x <= 0) {
                    x = 0;
                } else if (x >= ($(".box2").width() - $(".move").width())) {
                    x = ($(".box2").width() - $(".move").width())
                }

                if (y <= 0) {
                    y = 0
                } else if (y >= ($(".box2").height() - $(".move").height())) {
                    y = ($(".box2").height() - $(".move").height())
                }
                $(".move").css({ left: x, top: y });
                var X = -x * 4 + "px"
                var Y = -y * 4 + "px"

                $(".pos")
                $(".pos img").css({ left: X, top: Y });

            }

        })

    })
    $(document).on("mouseleave", ".box2", function () {
        flag = false
        // $(".move").css({ left: "0", top: "0" });
        $(".move").css({ display: "none" })
        $(".pos").css({ display: "none" })
        console.log(1);
    })





</script>

</html>